<template>
  <page-body>
    <view class="page">
      <cover-view class="flex benben-position-layout flex flex-wrap align-center courseIns_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <cover-view class='flex flex-wrap align-center justify-between flex-sub courseIns_fd0_0'>
          <cover-view class='flex flex-wrap align-center courseIns_fd0_0_c0'>
            <!-- <cover-view  class='fu-iconfont2  courseIns_fd0_0_c0_c0'></cover-view > -->
            <cover-image style="width: 20rpx;height: 30rpx;"  @tap.stop="handleJumpDiy" data-type="back"
            data-url="1" :src="benbenImageSrcResolution('black1.png', 'global')"></cover-image>
          </cover-view>
          <cover-view class='flex flex-wrap align-stretch justify-center'>
            <cover-view class='courseIns_fd0_0_c1_c0'>课程详情</cover-view>
          </cover-view>
          <cover-view class='flex flex-wrap align-center justify-end courseIns_fd0_0_c0'></cover-view>
        </cover-view>

      </cover-view>

      <!--
      <view class="flex benben-position-layout flex flex-wrap align-center courseIns_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub courseIns_fd0_0'>

          <view class='flex flex-wrap align-center courseIns_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  courseIns_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='courseIns_fd0_0_c1_c0'>课程详情</text>
          </view>
          <view class='flex flex-wrap align-center justify-end courseIns_fd0_0_c0'>
          </view>
        </view>

      </view> -->
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <!-- style="width: 100vw;" v-html="getVideo(introduce.video,introduce.video_thumb,introduce.video_url, introduce.thumb)" -->
      <view class="flex benben-flex-layout flex-wrap align-center">
        <video id="myVideo" class='flex  courseIns_fd1_0' v-if="introduce.video" :poster="introduce.video_thumb"
          :src="introduce.video_url" controls='true' x5-video-player-type="h5" :enable-progress-gesture='true'
          object-fit="fill"></video>
        <image style="width: 100%;" :src="introduce.thumb" v-else mode=""></image>

      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout courseIns_flex_2">
        <view class=' align-center courseIns_fd2_0'>
          <text class='courseIns_fd2_0_c0'>{{introduce.course_name}}</text>
          <text class='courseIns_fd2_0_c1' v-if=" introduce.is_study=='1'">必修</text>
        </view>
        <view class='flex flex-wrap align-center courseIns_fd2_1'>
          <view>
            <benben-flex-tabs class-name='courseIns_benbenTabsfd2_1_c0' v-model="tabsVal" ref="benben_tabsfd2_1_c0"
              select-mark="benben_tabsfd2_1_c0" key="benben_tabsfd2_1_c0" :open-title-type='false' :open-sticky='true'
              :top='0' :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd2_1_c0">

              <scroll-view @scroll="tabsInfofd2_1_c0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd2_1_c0"
                class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left="tabsInfofd2_1_c0.moveX"
                scroll-with-animation="all .3s ease">
                <view class="benben-tabs-content" id="benben_tabsfd2_1_c0-content">
                  <view id="benben_tabsfd2_1_c0-title" class="benben-tabs-title flex flex align-center justify-around">
                    <template v-for='(item,key0) in tabs'>
                      <view :key='key0'
                        :class="{ 'checkTitlefd2_1_c0': tabsVal == item.value, 'flex flex-wrap align-center': true }"
                        @tap="tabsVal = item.value" :id="`benben_tabsfd2_1_c0-title-item-${item.value}`">

                        <text>{{item.name}}</text>

                      </view>
                    </template>
                  </view>
                  <view :style="{ left: tabsInfofd2_1_c0.lineleft, maxWidth: tabsInfofd2_1_c0.lineWidth ,}"
                    id="benben_tabsfd2_1_c0-line"
                    class="benben-tabs-line flex benben-flex-tabs-line courseIns_linefd2_1_c0"></view>
                </view>
              </scroll-view>

            </benben-flex-tabs>

          </view>
        </view>
        <view class='flex flex-wrap align-center courseIns_fd2_2' v-if=" tabsVal=='1'&&introduce.brief">
          <jyf-parser class='courseIns_fd2_2_c0' :html="introduce.brief | richTextFormat">
          </jyf-parser>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1725072070408" :mask="true" :mask-close-able="true" mode='center'
        :z-index='999999'>
        <!---flex布局flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center">
          <view class='flex flex-direction flex-wrap align-stretch justify-between courseIns_fd3_0'>
            <view class='flex flex-direction flex-wrap align-center justify-around courseIns_fd3_0_c0'>
              <text class='courseIns_fd3_0_c0_c0'>提示</text>
              <text class='courseIns_fd3_0_c0_c1'>是否开始练习？</text>
            </view>
            <view class='flex flex-wrap align-center justify-center courseIns_fd3_0_c1'>
              <view class='flex flex-wrap align-center justify-center courseIns_fd3_0_c1_c0'>
                <text class='courseIns_fd3_0_c1_c0_c0'>取消</text>
              </view>
              <view class='flex flex-wrap align-center justify-center courseIns_fd3_0_c1_c1'>
                <text class='courseIns_fd3_0_c1_c1_c0'>确定</text>
              </view>
            </view>
          </view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout courseIns_flex_4"
        v-if=" tabsVal=='2'">
        <template v-for='(item,key0) in list'>
          <view class='flex flex-direction flex-wrap align-stretch courseIns_fd4_0' :key='key0'>

            <benben-flex-collapse class='flex flex flex-direction'>


              <benben-collapse-item name="CollapseItem1725004516736" :border='true'>
                <template #title="{isOpen,disabled}">
                  <view v-if="!isOpen" class="flex not an flex align-center courseIns_notAnfd4_0_c0_c0"
                    :class="disabled?'benben-collapse-disabled':''">

                    <view class='flex flex align-center justify-center flex-sub courseIns_notAnfd4_0_c0_c0_c0'>
                      <text class='flex-sub courseIns_notAnfd4_0_c0_c0_c0_c0'>{{item.chapter_name}}</text>
                    </view>

                    <view class='flex flex align-center justify-center courseIns_notAnfd4_0_c0_c0_c1'>
                      <text class='fu-iconfont2  courseIns_notAnfd4_0_c0_c0_c1_c0'>&#xE78A;</text>
                    </view>

                  </view>
                  <view v-if="isOpen" class="flex an flex align-center courseIns_notAnfd4_0_c0_c0"
                    :class="disabled?'benben-collapse-disabled':''">

                    <view class='flex flex align-center justify-center flex-sub courseIns_notAnfd4_0_c0_c0_c0'>
                      <text class='flex-sub courseIns_notAnfd4_0_c0_c0_c0_c0'>{{item.chapter_name}}</text>
                    </view>

                    <view class='flex flex align-center justify-center courseIns_notAnfd4_0_c0_c0_c1'>
                      <text class='fu-iconfont2  courseIns_anfd4_0_c0_c0_c1_c0'>&#xE7ED;</text>
                    </view>

                  </view>
                </template>
                <template #line>
                  <view class="flex line  courseIns_linefd4_0_c0_c0"></view>
                </template>
                <template #content>
                  <view class="flex area flex courseIns_areafd4_0_c0_c0">

                    <view class='flex flex-direction align-center flex-sub flex courseIns_areafd4_0_c0_c0_c0'>
                      <template v-for='(child,key1) in item.child'>
                        <view class='flex flex-direction align-stretch justify-around courseIns_areafd4_0_c0_c0_c0_c0'
                          v-if=" child.file_type=='mp4'" :key='key1'>
                          <view class='flex flex-wrap align-center justify-between courseIns_areafd4_0_c0_c0_c0_c0_c0'>
                            <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c0_c0'>
                              <image class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c0' mode="aspectFit"
                                :src='STATIC_URL+"guofang/49.png"'></image>
                              <text class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c1'>{{child.mean_name}}</text>
                            </view>
                            <button class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c1' @tap.stop="handleJumpDiy"
                              data-type="navigateTo" :data-url="`/pages/honoDeta/content/content?aid=${child.aid}`"
                              v-if=" child.is_finish==0">观看</button>
                            <button class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c1' @tap.stop="handleJumpDiy"
                              data-type="navigateTo" :data-url="`/pages/honoDeta/content/content?aid=${child.aid}`"
                              v-if=" child.is_finish=='1'">继续观看</button>
                            <button class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c1' @tap.stop="handleJumpDiy"
                              data-type="navigateTo" :data-url="`/pages/honoDeta/content/content?aid=${child.aid}`"
                              v-if=" child.is_finish=='2'">已完看</button>
                          </view>
                          <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c1'>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c0'>学习进度</text>
                            <view class='flex benben-progress-bar courseIns_areafd4_0_c0_c0_c0_c0_c1_c1'>
                              <view class='benben-progress-bar-center courseIns_progress1_areafd4_0_c0_c0_c0_c0_c1_c1'
                                :style="{width: child.period+'%'}"></view>
                            </view>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>{{child.period}}</text>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>%</text>
                          </view>
                        </view>

                        <view class='flex flex-direction align-stretch justify-around courseIns_areafd4_0_c0_c0_c0_c0'
                          v-if=" child.file_type=='ppt'||child.file_type=='pptx'" :key='key1'>

                          <view class='flex flex-wrap align-center justify-between courseIns_areafd4_0_c0_c0_c0_c0_c0'>
                            <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c0_c0'>
                              <image class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c0' mode="aspectFit"
                                :src='STATIC_URL+"61.png"'></image>
                              <text class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c1'>{{child.mean_name}}</text>
                            </view>
                            <button class='courseIns_areafd4_0_c0_c0_c0_c1_c0_c1'
                              @tap.stop="seePdf(child.file[0].path,child.aid)">查看</button>
                          </view>
                          <!-- <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c1'>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c0'>学习进度</text>
                            <view class='flex benben-progress-bar courseIns_areafd4_0_c0_c0_c0_c0_c1_c1'>
                              <view class='benben-progress-bar-center courseIns_progress1_areafd4_0_c0_c0_c0_c0_c1_c1'
                                :style="{width: child.period+'%'}"></view>

                            </view>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>{{child.period}}</text>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>%</text>
                          </view> -->
                        </view>

                        <view class='flex flex-direction align-stretch justify-around courseIns_areafd4_0_c0_c0_c0_c0'
                          v-if=" child.file_type=='doc'||child.file_type=='docx'" :key='key1'>
                          <view class='flex flex-wrap align-center justify-between courseIns_areafd4_0_c0_c0_c0_c0_c0'>
                            <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c0_c0'>
                              <image class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c0' mode="aspectFit"
                                :src='STATIC_URL+"guofang/60.png"'></image>
                              <text class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c1'>{{child.mean_name}}</text>
                            </view>
                            <button class='courseIns_areafd4_0_c0_c0_c0_c1_c0_c1'
                              @tap.stop="seePdf(child.file[0].path,child.aid)">查看</button>
                          </view>
                          <!-- <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c1'>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c0'>学习进度</text>
                            <view class='flex benben-progress-bar courseIns_areafd4_0_c0_c0_c0_c0_c1_c1'>
                              <view class='benben-progress-bar-center courseIns_progress1_areafd4_0_c0_c0_c0_c0_c1_c1'
                                :style="{width: child.period+'%'}"></view>

                            </view>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>{{child.period}}</text>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>%</text>
                          </view> -->
                        </view>
                        <view class='flex flex-direction align-stretch justify-around courseIns_areafd4_0_c0_c0_c0_c0'
                          v-if=" child.file_type=='pdf'" :key='key1'>
                          <view class='flex flex-wrap align-center justify-between courseIns_areafd4_0_c0_c0_c0_c0_c0'>
                            <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c0_c0'>
                              <image class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c0' mode="aspectFit"
                                :src='STATIC_URL+"guofang/59.png"'></image>
                              <text class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c1'>{{child.mean_name}}</text>
                            </view>
                            <button class='courseIns_areafd4_0_c0_c0_c0_c1_c0_c1'
                              @tap.stop="seePdf(child.file[0].path,child.aid)">查看</button>
                          </view>
                          <!-- <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c1'>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c0'>学习进度</text>
                            <view class='flex benben-progress-bar courseIns_areafd4_0_c0_c0_c0_c0_c1_c1'>
                              <view class='benben-progress-bar-center courseIns_progress1_areafd4_0_c0_c0_c0_c0_c1_c1'
                                :style="{width: child.period+'%'}"></view>

                            </view>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>{{child.period}}</text>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>%</text>
                          </view> -->
                        </view>

                      </template>
                      <template v-for='(child,key1) in item.list'>
                        <view class='flex flex-direction align-stretch justify-around courseIns_areafd4_0_c0_c0_c0_c0'
                          v-if=" child.file_type=='doc'||child.file_type=='docx'" :key='key1'>
                          <view class='flex flex-wrap align-center justify-between courseIns_areafd4_0_c0_c0_c0_c0_c0'>
                            <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c0_c0'>
                              <image class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c0' mode="aspectFit"
                                :src='STATIC_URL+"guofang/60.png"'></image>
                              <text class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c1'>{{child.mean_name}}</text>
                            </view>
                            <button class='courseIns_areafd4_0_c0_c0_c0_c1_c0_c1'
                              @tap.stop="seePdf(child.file[0].path,child.aid)">查看</button>
                          </view>
                          <!--   <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c1'>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c0'>学习进度</text>
                            <view class='flex benben-progress-bar courseIns_areafd4_0_c0_c0_c0_c0_c1_c1'>
                              <view class='benben-progress-bar-center courseIns_progress1_areafd4_0_c0_c0_c0_c0_c1_c1'
                                :style="{width: child.period+'%'}"></view>
                            </view>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>{{child.period}}</text>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>%</text>
                          </view> -->
                        </view>
                      </template>

                      <template v-for='(child,key1) in item.list'>
                        <view class='flex flex-direction align-stretch justify-around courseIns_areafd4_0_c0_c0_c0_c0'
                          v-if=" child.file_type=='pdf'" :key='key1'>
                          <view class='flex flex-wrap align-center justify-between courseIns_areafd4_0_c0_c0_c0_c0_c0'>
                            <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c0_c0'>
                              <image class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c0' mode="aspectFit"
                                :src='STATIC_URL+"guofang/59.png"'></image>
                              <text class='courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c1'>{{child.mean_name}}</text>
                            </view>
                            <button class='courseIns_areafd4_0_c0_c0_c0_c1_c0_c1'
                              @tap.stop="seePdf(child.file[0].path,child.aid)">查看</button>
                          </view>
                          <!-- <view class='flex flex-wrap align-center courseIns_areafd4_0_c0_c0_c0_c0_c1'>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c0'>学习进度</text>
                            <view class='flex benben-progress-bar courseIns_areafd4_0_c0_c0_c0_c0_c1_c1'>
                              <view class='benben-progress-bar-center courseIns_progress1_areafd4_0_c0_c0_c0_c0_c1_c1'
                                :style="{width: child.period+'%'}"></view>

                            </view>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>{{child.period}}</text>
                            <text class='courseIns_areafd4_0_c0_c0_c0_c0_c1_c2'>%</text>
                          </view> -->
                        </view>
                      </template>

                    </view>

                  </view>
                </template>
              </benben-collapse-item>


            </benben-flex-collapse>

          </view>
        </template>

      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout courseIns_flex_5"
        v-if=" tabsVal=='3'">
        <!-- <template v-for='(item,key0) in examination'> -->
        <view class='flex flex-direction flex-wrap align-stretch courseIns_fd5_0' :key='key0' v-if="examination.length">
          <!--
            <benben-flex-collapse class='flex flex flex-direction'>


              <benben-collapse-item name="CollapseItem1725005371649" :border='true'> -->
          <!--  <template #title="{isOpen,disabled}">
                  <view v-if="!isOpen" class="flex not an flex align-center courseIns_notAnfd5_0_c0_c0"
                    :class="disabled?'benben-collapse-disabled':''">

                    <view class='flex flex align-center justify-center flex-sub courseIns_notAnfd5_0_c0_c0_c0'>
                      <text class='flex-sub courseIns_notAnfd5_0_c0_c0_c0_c0'>{{item.chapter_name}}</text>
                    </view>

                    <view class='flex flex align-center justify-center courseIns_notAnfd5_0_c0_c0_c1'>
                      <text class='fu-iconfont2  courseIns_notAnfd5_0_c0_c0_c1_c0'>&#xE78A;</text>
                    </view>

                  </view>
                  <view v-if="isOpen" class="flex an flex align-center courseIns_notAnfd5_0_c0_c0"
                    :class="disabled?'benben-collapse-disabled':''">

                    <view class='flex flex align-center justify-center flex-sub courseIns_notAnfd5_0_c0_c0_c0'>
                      <text class='flex-sub courseIns_notAnfd5_0_c0_c0_c0_c0'>{{item.chapter_name}}</text>
                    </view>

                    <view class='flex flex align-center justify-center courseIns_notAnfd5_0_c0_c0_c1'>
                      <text class='fu-iconfont2  courseIns_anfd5_0_c0_c0_c1_c0'>&#xE7ED;</text>
                    </view>

                  </view>
                </template>
                <template #line>
                  <view class="flex line  courseIns_linefd5_0_c0_c0"></view>
                </template> -->
          <!-- <template #content> -->
          <view class="flex area flex courseIns_areafd5_0_c0_c0">

            <view class='flex flex-direction align-center flex-sub flex courseIns_areafd5_0_c0_c0_c0'>
              <template v-for='(item,key1) in examination'>
                <view class='flex flex-direction align-stretch justify-around courseIns_areafd5_0_c0_c0_c0_c0'
                  :key='key1'>
                  <view class='flex flex-wrap align-center justify-between courseIns_areafd5_0_c0_c0_c0_c0_c0'>
                    <view class='flex flex-wrap align-center courseIns_areafd5_0_c0_c0_c0_c0_c0_c0'>
                      <text class='courseIns_areafd5_0_c0_c0_c0_c0_c0_c0_c0'>{{item.chapter_name}}</text>
                    </view>
                    <button class='courseIns_areafd5_0_c0_c0_c0_c0_c0_c1'
                      @tap.stop="navs(item.aid,item.chapter_name)">开始</button>
                  </view>
                </view>
              </template>

            </view>

          </view><!--
                </template>
              </benben-collapse-item>


            </benben-flex-collapse> -->

        </view>
        <!-- </template> -->

      </view>

      <!---flex布局flex布局结束-->
      <view class="flex flex-wrap align-start justify-center benben-position-layout flex courseIns_flex_6"
        v-if=" introduce.is_study==0 && tabsVal=='1' || tabsVal=='2'"
        :style="{height:(170+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }"
        style="background-color: #f6f6f6;">
        <!-- {{ introduce.is_study}} -->
        <button class='courseIns_fd6_0' @tap.stop="getcx481b1f1a9d27Func()" v-if=" introduce.study=='1'">加入课程</button>
        <button class='courseIns_fd6_1' @tap.stop="getwl4d5e4added2aFunc()"
          v-if=" introduce.study==0 &&introduce.is_study!=1">取消课程</button>
        <!-- v-if=" introduce.is_study=='1'" -->
      </view>
      <view :style="{height: (170+bottomSafeAreaRpx)+'rpx'}"
        v-if=" tabsVal=='1' || tabsVal=='2' && introduce.is_study==0"></view>


    </view>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},


    data() {
      return {
        "time": "",
        "popupShow1725072070408": false,
        "tabsInfofd2_1_c0": {
          lineleft: '',
          lineWidth: '',
          moveX: 0,
          scrollX: 0,
          PageScrollX: 0
        },
        "tabsVal": "1",
        "tabs": [{
          "name": "简介",
          "value": "1",
          "image": ""
        }, {
          "name": "章节",
          "value": "2",
          "image": ""
        }, {
          "name": "章节测试",
          "value": "3",
          "image": ""
        }],
        "list": [],
        "introduce": {
          "aid": "",
          "name": "",
          "thumb": "",
          "brief": "",
          "video": "",
          "course_name": "",
          "is_study": "",
          "study": "",
          "video_thumb": "",
          "video_url": ""
        },
        "examination": [],
        "course_id": "",
        "navType": ""
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      let {
        course_id,
        navType
      } = options
      if (course_id !== undefined) this.course_id = course_id
      if (navType != undefined) this.navType = navType

    },
    onUnload() {
    this.videoContext && this.videoContext.stop();
    },
    onReady() {
      this.videoContext = uni.createVideoContext('myVideo', this);
    },
    onShow() {
      setTimeout(() => {
        this.getmv47ed860f3e45Func()
        this.getcn6bdd983a7c50Func()
        this.getid6bf171e5967aFunc()
      }, 100)

    },
    onHide() {
    this.videoContext && this.videoContext.stop();
    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {

      // getVideo(video,video_thumb,video_url, imgUrl){
      // 				return `<video class='flex  style="width:100vw" courseIns_fd1_0' v-if="${video}" :poster="${video_thumb}" :src="${video_url}" controls='true'
      // x5-video-player-type="h5" :enable-progress-gesture='true' object-fit="fill"></video>
      // <image style="width: 100vw;" :src="${imgUrl}" v-else mode=""></image>`
      // 			},
      /* 返回页面*/
      navBack() {
        if (this.navType == 1) {
          uni.redirectTo({
            url: `/pages/about/course/course`
          })
        } else if (this.navType == 2) {
          uni.redirectTo({
            url: `/pages/about/Mycourse/Mycourse`
          })
        }
      },


      /* 跳转做题页面 */
      navs(aid, name) {
        uni.setStorageSync("course_id", this.course_id)
        console.log("aid=>", aid)
        uni.redirectTo({
          url: `/pages/examination/answer/answer?course_id=${aid}&name=${name}&type=2&val=1&navType=${this.navType}`
        })
      },



      // 打开学习资料
      seePdf(file, aid) {
        let _this = this;
        let id = aid;
        let url = file;
        // let files = uni.getStorageSync('files') ? JSON.parse(uni.getStorageSync('files')) : {}
        // console.log(files)
        // #ifdef APP-PLUS

        let files = uni.getStorageSync('files') ? JSON.parse(uni.getStorageSync('files')) : {}
        console.log(files)
        if (files[id]) {
          // 已下载的文件直接打开
          plus.runtime.openFile(files[id], {}, (res) => {
            console.log("res=>", res);
            // downloadFile()
          })
        } else {
          downloadFile()
        }

        function downloadFile() {
          uni.showLoading({
            title: '加载中'
          })
          const dtask = plus.downloader.createDownload(url, {}, function(d, status) {
            if (status == 200) {
              console.log('保存成功')
              _this.aid = aid
              _this.addRecord();
              uni.hideLoading();
              //下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
              //const fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
              files[id] = d.filename
              uni.setStorageSync('files', JSON.stringify(files))
              plus.runtime.openFile(d.filename) //选择软件打开文件
            } else {
              //下载失败
              plus.downloader.clear() //清除下载任务
              uni.hideLoading();
              uni.showToast({
                title: '文档加载失败，请稍后再试',
                icon: 'none',
              })
            }
          })
          dtask.start()
        }
        // #endif

        // #ifdef H5
        window.open(url)
        // #endif
        // this.fileUrl = file[0].path;
        // this.showPreview = true;
        // let _this = this;
        // _this.means_id = aid;
        // uni.showLoading({
        // 	title: '加载中...'
        // })

        // uni.downloadFile({
        // 	url: file[0].path,
        // 	success: function(res) {
        // 		var filePath = res.tempFilePath;
        // 		uni.hideLoading();
        // 		uni.openDocument({
        // 			filePath: filePath,
        // 			showMenu: true,
        // 			success: function(res) {
        // 				console.log('打开文档成功');
        // 			}
        // 		});
        // 	},
        // 	fail: function(err) {
        // 		uni.hideLoading();
        // 		uni.showToast({
        // 			title: '文档加载失败，请重试',
        // 			icon: 'none'
        // 		})
        // 	}
        // });
      },

      /* 添加学习记录*/
      async addRecord() {
        let data64910ea324123 = await this.$api.post(global.apiUrls.post64910ea324123, {
          means_id: this.aid,
          demand: this.time
        })
        console.log("触发了=>", data64910ea324123)
        if (data64910ea324123.data.code != 1) {
          this.$message.info(data64910ea324123.data.msg);
          return
        }
      },




      //查询课程章节
      async getmv47ed860f3e45Func() {
        //请求方法
        //数据验证

        let datalist = await this.$api.get(global.apiUrls.post647ed860f3e45, {
          course_id: this.course_id

        });

        if (datalist.data.code != 1) {
          this.$message.info(datalist.data.msg);
          return
        }
        let infolist = datalist.data.data;
        this.list = infolist.data

        console.log("this.list=>", this.list)
      },
      //查询课程介绍
      async getcn6bdd983a7c50Func() {
        //请求方法
        //数据验证

        let dataintroduce = await this.$api.get(global.apiUrls.post66bdd983a7c50, {
          course_id: this.course_id,
          user_id: uni.getStorageSync("USER_INFO").id
        });

        if (dataintroduce.data.code != 1) {
          this.$message.info(dataintroduce.data.msg);
          return
        }
        let infointroduce = dataintroduce.data;
        this.introduce = infointroduce.data

      },
      //查询章节测试列表
      async getid6bf171e5967aFunc() {
        //请求方法
        //数据验证

        let dataexamination = await this.$api.get(global.apiUrls.post66bf171e5967a, {
          course_id: this.course_id
        });

        if (dataexamination.data.code != 1) {
          this.$message.info(dataexamination.data.msg);
          return
        }
        let infoexamination = dataexamination.data.data;
        this.examination = infoexamination.data

      },
      //用户取消学习课程
      async getwl4d5e4added2aFunc() {
        //请求方法
        //数据验证

        let data64d5e4added2a = await this.$api.post(global.apiUrls.post64d5e4added2a, {
          aid: this.course_id
        });

        if (data64d5e4added2a.data.code != 1) {
          this.$message.info(data64d5e4added2a.data.msg);
          return
        }
        let info64d5e4added2a = data64d5e4added2a.data;


        this.getmv47ed860f3e45Func()
        this.getcn6bdd983a7c50Func()
        this.getid6bf171e5967aFunc()
        if (this.$util.antiShakeThrottle()) return
      },
      //添加学习课程
      async getcx481b1f1a9d27Func() {
        //请求方法
        //数据验证

        let data6481b1f1a9d27 = await this.$api.post(global.apiUrls.post6481b1f1a9d27, {
          course_id: this.course_id
        });

        if (data6481b1f1a9d27.data.code != 1) {
          this.$message.info(data6481b1f1a9d27.data.msg);
          return
        }
        let info6481b1f1a9d27 = data6481b1f1a9d27.data;


        this.getmv47ed860f3e45Func()
        this.getcn6bdd983a7c50Func()
        this.getid6bf171e5967aFunc()
        if (this.$util.antiShakeThrottle()) return
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F6f6f6;
    background-size: 100% auto;
  }

  .courseIns_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 148rpx;
    overflow: hidden;
    padding-top: 40rpx;
    z-index: 100000000000000000000;
    position: fixed;
    top: -60rpx;
    background-size: 100% auto !important;
  }

  .courseIns_fd0_0_c1_c0 {
    z-index: 100000000000000000000;
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .courseIns_fd0_0_c0_c0 {
    z-index: 100000000000000000000;
    font-size: 36rpx;
    color: #333;
  }

  .courseIns_fd0_0_c0 {
    z-index: 100000000000000000000;
    width: 120rpx;
    // background-color: red;
    height: 60rpx;
  }

  .courseIns_fd0_0 {
    z-index: 100000000000000000000;
    padding: 45rpx 32rpx 0rpx 32rpx;
  }

  .courseIns_fd1_0 {
    width: 750rpx;
    height: 360rpx;
    z-index: 10;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .courseIns_flex_2 {
    padding: 24rpx 24rpx 0rpx 24rpx;
    margin: 0rpx 0rpx 0rpx 0rpx;
  }

  ::v-deep .courseIns_fd2_2_c0 {
    width: 100%;
  }

  .courseIns_fd2_2 {
    background: #fff;
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 30rpx 24rpx 30rpx 24rpx;
    margin: 0rpx 0rpx 034rpx 0rpx;
    width: 100%;
  }

  .courseIns_linefd2_1_c0 {
    background: #d53215;
    width: 40rpx;
    height: 8rpx;
    top: 80rpx;
    background-size: 100% auto !important;
  }

  .checkTitlefd2_1_c0 {
    font-weight: 700 !important;
    font-size: 28rpx !important;
    color: #333 !important;
    background-color: rgba(255, 255, 255, 1) !important;
  }

  ::v-deep .courseIns_benbenTabsfd2_1_c0 {
    background: #fff;
    width: 90%;
    height: 90rpx;
    white-space: nowrap;
    text-align: center;
    border-radius: 16rpx;
  }

  .courseIns_fd2_1 {
    background: #fff;
    margin: 24rpx 0rpx 24rpx 0rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
    width: 100%;
    height: 108rpx;
  }

  .courseIns_fd2_0_c1 {
    display: inline-block;
    background: linear-gradient(180deg, #FF6648 0%, #FF8C49 100%);
    width: 72rpx;
    height: 36rpx;
    line-height: 36rpx;
    text-align: center;
    margin: 0rpx 0rpx 0rpx 16rpx;
    color: var(--benbenFontColor3);
    background-size: 100% auto;
    font-size: 24rpx;
    border-radius: 8rpx;
  }

  .courseIns_fd2_0_c0 {
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    line-height: 40rpx;
    font-weight: 500;
  }

  .courseIns_fd2_0 {
    background: #fff;
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 24rpx;
    // height: 104rpx;
    width: 100%;
  }

  .courseIns_fd3_0_c1_c1_c0 {
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    line-height: 45rpx;
    font-weight: 500;
  }

  .courseIns_fd3_0_c1_c1 {
    width: 259rpx;
    height: 98rpx;
  }

  .courseIns_fd3_0_c1_c0_c0 {
    font-size: 32rpx;
    line-height: 44rpx;
    color: rgba(153, 153, 153, 1);
  }

  .courseIns_fd3_0_c1_c0 {
    border-right: 1px solid #eee;
    width: 259rpx;
    height: 98rpx;
  }

  .courseIns_fd3_0_c1 {
    height: 99rpx;
  }

  .courseIns_fd3_0_c0_c1 {
    margin: 0rpx 0rpx 030rpx 0rpx;
    font-size: 36rpx;
    color: #333;
    line-height: 50rpx;
    font-weight: 500;
  }

  .courseIns_fd3_0_c0_c0 {
    font-size: 32rpx;
    line-height: 44rpx;
    color: rgba(153, 153, 153, 1);
    font-weight: 800;
  }

  .courseIns_fd3_0_c0 {
    border-bottom: 1px solid #eee;
    height: 227rpx;
  }

  .courseIns_fd3_0 {
    background: rgba(255, 255, 255, 1);
    border-radius: 25rpx;
    width: 540rpx;
    height: 332rpx;
    background-size: 100% auto;
  }

  .courseIns_flex_4 {
    padding: 0rpx 24rpx 150rpx 24rpx;
  }

  .courseIns_areafd4_0_c0_c0_c0_c1_c0_c1 {
    border: 1px solid rgba(225, 74, 64, 1);
    background: #faf4e9;
    border-radius: 33rpx 33rpx 33rpx 33rpx;
    width: 120rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    color: rgba(204, 34, 28, 1);
  }

  .courseIns_areafd4_0_c0_c0_c0_c0_c1_c2 {
    font-size: 24rpx;
    color: rgba(172, 179, 185, 1);
  }

  .courseIns_progress1_areafd4_0_c0_c0_c0_c0_c1_c1 {
    background: rgba(225, 74, 64, 1);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .courseIns_areafd4_0_c0_c0_c0_c0_c1_c1 {
    background: #f6f7f9;
    width: 300rpx;
    height: 20rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto;
  }

  .courseIns_areafd4_0_c0_c0_c0_c0_c1_c0 {
    font-size: 24rpx;
    line-height: 33rpx;
    font-weight: 400;
    color: rgba(172, 179, 185, 1);
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .courseIns_areafd4_0_c0_c0_c0_c0_c1 {
    margin: 0rpx 0rpx 10rpx 0rpx;
  }

  .courseIns_areafd4_0_c0_c0_c0_c0_c0_c1 {
    background: rgba(225, 74, 64, 1);
    border-radius: 33rpx 33rpx 33rpx 33rpx;
    width: 120rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c1 {
    margin: 0rpx 0rpx 0rpx 16rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
    width: 400rpx;
  }

  .courseIns_areafd4_0_c0_c0_c0_c0_c0_c0_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .courseIns_areafd4_0_c0_c0_c0_c0_c0_c0 {
    width: 500rpx;
  }

  .courseIns_areafd4_0_c0_c0_c0_c0_c0 {
    margin: 10rpx 0rpx 0rpx 0rpx;
  }

  .courseIns_areafd4_0_c0_c0_c0_c0 {
    border-bottom: 1px solid #eee;
    width: 100%;
    height: 170rpx;
  }

  .courseIns_areafd4_0_c0_c0_c0 {
    width: 100%;
  }

  .courseIns_anfd4_0_c0_c0_c1_c0 {
    color: rgb(187, 187, 187);
    font-size: 28rpx;
    transform: scale(0.5);
    margin: 0rpx 10rpx 0rpx 10rpx;
  }

  .courseIns_notAnfd4_0_c0_c0_c1_c0 {
    color: rgba(187, 187, 187, 1);
    font-size: 28rpx;
    transform: scale(0.5);
    margin: 0rpx 10rpx 0rpx 10rpx;
  }

  .courseIns_notAnfd4_0_c0_c0_c1 {
    height: 100%;
    width: 60rpx;
  }

  .courseIns_notAnfd4_0_c0_c0_c0_c0 {
    padding: 0rpx 15rpx 0rpx 15rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: rgb(16, 16, 16);
    line-height: 40rpx;
    text-decoration: none;
  }

  .courseIns_notAnfd4_0_c0_c0_c0 {
    height: 100%;
  }

  .courseIns_linefd4_0_c0_c0 {
    background: #ebeef5;
    width: 100%;
    height: 1rpx;
    margin: 10rpx 0rpx 10rpx 0rpx;
    transform: scaleY(0.5);
  }

  .courseIns_areafd4_0_c0_c0 {
    min-height: 80rpx;
  }

  .courseIns_notAnfd4_0_c0_c0 {
    height: 96rpx;
  }

  .courseIns_fd4_0 {
    background: #fff;
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 0rpx 24rpx 30rpx 24rpx;
  }

  .courseIns_flex_5 {
    padding: 0rpx 24rpx 30rpx 24rpx;
  }

  .courseIns_areafd5_0_c0_c0_c0_c0_c0_c1 {
    background: rgba(225, 74, 64, 1);
    border-radius: 33rpx 33rpx 33rpx 33rpx;
    width: 120rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .courseIns_areafd5_0_c0_c0_c0_c0_c0_c0_c0 {
    margin: 0rpx 0rpx 0rpx 16rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
    width: 400rpx;
  }

  .courseIns_areafd5_0_c0_c0_c0_c0_c0_c0 {
    width: 500rpx;
  }

  .courseIns_areafd5_0_c0_c0_c0_c0_c0 {
    margin: 10rpx 0rpx 0rpx 0rpx;
  }

  .courseIns_areafd5_0_c0_c0_c0_c0 {
    border-bottom: 1px solid #eee;
    width: 100%;
    height: 170rpx;
  }

  .courseIns_areafd5_0_c0_c0_c0 {
    width: 100%;
  }

  .courseIns_anfd5_0_c0_c0_c1_c0 {
    color: rgb(187, 187, 187);
    font-size: 28rpx;
    transform: scale(0.5);
    margin: 0rpx 10rpx 0rpx 10rpx;
  }

  .courseIns_notAnfd5_0_c0_c0_c1_c0 {
    color: rgba(187, 187, 187, 1);
    font-size: 28rpx;
    transform: scale(0.5);
    margin: 0rpx 10rpx 0rpx 10rpx;
  }

  .courseIns_notAnfd5_0_c0_c0_c1 {
    height: 100%;
    width: 60rpx;
  }

  .courseIns_notAnfd5_0_c0_c0_c0_c0 {
    padding: 0rpx 15rpx 0rpx 15rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: rgb(16, 16, 16);
    line-height: 40rpx;
    text-decoration: none;
  }

  .courseIns_notAnfd5_0_c0_c0_c0 {
    height: 100%;
  }

  .courseIns_linefd5_0_c0_c0 {
    background: #ebeef5;
    width: 100%;
    height: 1rpx;
    margin: 10rpx 0rpx 10rpx 0rpx;
    transform: scaleY(0.5);
  }

  .courseIns_areafd5_0_c0_c0 {
    min-height: 80rpx;
  }

  .courseIns_notAnfd5_0_c0_c0 {
    height: 96rpx;
  }

  .courseIns_fd5_0 {
    background: #fff;
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 0rpx 24rpx 30rpx 24rpx;
  }

  .courseIns_flex_6 {
    background: transparent;
    width: 750rpx;
    height: 170rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
    background-size: 100% auto;
  }

  .courseIns_fd6_1 {
    background: #fff;
    border-radius: 45rpx;
    width: 638rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: rgba(51, 51, 51, 1);
    margin: 20rpx 0rpx 0rpx 0rpx;
  }

  .courseIns_fd6_0 {
    background: rgba(225, 74, 64, 1);
    border-radius: 45rpx;
    width: 638rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
    margin: 20rpx 0rpx 0rpx 0rpx;
  }
</style>
